<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/site.css">
    <script src="js/viewport.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/public.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
</head>

<body>
<div id="app">
    <header class="padding-35">
        <div class="logo">
            <img src="imgs/logo.png" alt="">
        </div>
        <div class="menu">
            <img src="imgs/menu.png" alt="">
        </div>
    </header>
    <div class="mbx padding-35">
        <a href="index.html">健康美食网</a>
        <i class="iconfont icon-arrow-right-copy-copy"></i>
        <span>菜系</span>
    </div>
    <div class="search">
        <div class="searchBox padding-35">
            <input type="text" placeholder="搜索菜谱、食材、菜单、用户">
            <img src="imgs/fangdajing.png" alt="" srcset="">
        </div>
    </div>
    <div class="itemBanner padding-35">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="imgs/banner1.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="content padding-35">
        <div class="itemNav">
            <div class="menuTit">热门导航</div>
            <div class="cuisineNav">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav3.png" alt="">
                            <p>鲁菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav1.png" alt="">
                            <p>川菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav7.png" alt="">
                            <p>粤菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav5.png" alt="">
                            <p>苏菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav4.png" alt="">
                            <p>闽菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav8.png" alt="">
                            <p>浙菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav6.png" alt="">
                            <p>湘菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="imgs/nav2.png" alt="">
                            <p>徽菜</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="menuBox">
            <div class="menuListBox clearfix">
                </div>
                <div class="menuListMore fr">
                    <a href="JavaScript:;">更多<i>></i></a>
                </div>
            </div>
            <div class="hotMenu">
                <div class="hotMenuBox">
                    <ul class="clearfix">
                        <li v-for="cg in category">
                            <a href="javascript:;" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                                <img :src="cg.cimg" alt="" >
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>

                    </ul>
                </div>
                <div class="hotMenuBox none">
                    <ul class="clearfix">
                        <li v-for="cg in category">
                            <a href="javascript:;" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                                <img :src="cg.cimg" alt="">
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="hotMenuBox none">
                    <ul class="clearfix">
                        <li v-for="cg in category" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">
                            <a href="javascript:;">
                                <img :src="cg.cimg" alt="">
                                <p class="pOne">{{cg.cname}}</p>
                                <p class="pTwo">月亮私家烘焙</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="page">
            <a href="javascript:;">上一页</a>
            <a class="isOn" href="javascript:;">下一页</a>
        </div>

        <div class="news">
            <div class="newsTit">
                <span>分类导航</span>
                <a class="fr" href="javascript:;">更多<i>></i></a>
            </div>
            <div class="typeNav">
                <ul class="clearfix">
                    <li v-for="cg in category">
                        <a href="javascript:;" @click.prevent="tz('categoryDetail.html?cid=',cg.cgid)">{{cg.cname}}</a>
                    </li>
                </ul>
            </div>
            
        </div>

        <div class="rank">
            <div class="newsTit">
                <span>美食排行榜</span>
                <a class="fr" href="javascript:;">更多<i>></i></a>
            </div>
            <div class="rankBox">
                <ul>
                    <li v-for="d in delicacies">
                        <a href="javascript:;">{{d.dname}}</a>
                        <span class="fr">{{d.dtype}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer>
        <p>版权所有：版权所有：健康美食网 WWW.JKMEISHI.COM</p>
        <p>Copyright 2011-2018 备案号:鄂ICP备11013833号-4</p>
    </footer>
</div>

    <script>
        // var swiper = new Swiper('.swiper-container', {
        //     loop: true,
        //     autoplay: {
        //         delay: 2500,
        //         disableOnInteraction: false,
        //     }
        // });
        let bra_se = document.querySelector(".swiper-container div");
        let img_index = 1;
        // 启动定时器
        window.setInterval(()=>{
            //transition-duration   属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s，表示不出现过渡动画。
            // transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
            bra_se.style.cssText = `transition-duration: 0.8s; transform: translateX(-${100*img_index}vw);left: 0px;`;
            if( img_index % 3 == 0 ){
                img_index = 0;
                setTimeout(()=>{
                    bra_se.style.cssText = `transform: translateX(0vw);left: 0px`;
                }, 1500);
            }
            img_index++;
        }, 3500);
        var v = new Vue({
            el : "#app",
            data : {
                delicacies : {},
                category : {}
            },
            created(){
                this.querybyctype("鲁菜");
                this.queryCount();
            },
            methods:{
                querybyctype(type){
                    console.log(type)
                    axios.post("healthy/category/querybyctype", qs.stringify({type : type})).then(res=>{
                        this.category = res.data.data;
                        console.log(this.category);
                    })
                },
                tz(detail,id) {
                    // location.href ="cuisineDetail.html?cid="+id;
                    location.href = detail + id;
                },
                queryCount(){
                    axios.post("healthy/delicacies/querycount").then(res=>{
                        this.delicacies = res.data.data;
                        console.log(this.delicacies);
                    })
                }
            }
        })
        $(function () {
            $('.cuisineNav img').click(function () {
                var type = $(this).next().text();
                v.querybyctype(type);
            })
        })
    </script>
</body>

</html>